
import React, { forwardRef, Fragment,useImperativeHandle } from 'react';
import avatar_chartgpt from '../../../images/chartgpt.svg'
import avatar_spark from '../../../images/sparklite.png'
import SvgIcon from '../../Components/SvgIcon'
import ReactMarkdown from 'react-markdown';
function ChartContent(props,ref) {
  const avatar = {
    "ChatGPT": avatar_chartgpt,
    "Spark Lite":avatar_spark
  }
  useImperativeHandle(ref, () => ({
    send: (msg)=>{
      document.getElementById('answer').innerText = msg + '●'
    },
  }))
  return <Fragment>
    {props.charts.map((item,index)=>{
      if(item.role==='user'){
        return   <article key={index}
            className="w-full scroll-mb-[var(--thread-trailing-height,150px)] text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]"
            dir="auto"
            data-testid="conversation-turn-2"
            data-scroll-anchor="false"
          >
            <h5 className="sr-only">您说：</h5>
            <div
              className="m-auto text-base py-[18px] px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5"
            >
              <div
                className="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl"
              >
                <div
                  className="group/conversation-turn relative flex w-full min-w-0 flex-col"
                >
                  <div className="flex-col gap-1 md:gap-3">
                    <div className="flex max-w-full flex-col flex-grow">
                      <div
                        data-message-author-role="user"
                        data-message-id="aaa2c9bc-17ff-42c2-aaae-34c5a2021301"
                        dir="auto"
                        className="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5"
                      >
                        <div
                          className="flex w-full flex-col gap-1 empty:hidden items-end rtl:items-start"
                        >
                          <div
                            className="relative max-w-[var(--user-chat-width,70%)] rounded-3xl bg-token-message-surface px-5 py-2.5"
                          >
                            <div className="whitespace-pre-wrap">
                              {item.content}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </article>
      } else if(item.role !=='system'){
        return  <article key={index}
        className="w-full scroll-mb-[var(--thread-trailing-height,150px)] text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]"
        dir="auto"
        data-testid="conversation-turn-3"
        data-scroll-anchor="true"
      >
        <h6 className="sr-only">{props.model} 说：</h6>
        <div
          className="m-auto text-base py-[18px] px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5"
        >
          <div
            className="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl"
          >
            <div
              className="flex-shrink-0 flex flex-col relative items-end"
            >
              <div>
                <div className="pt-0">
                  <div
                    className="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
                  >
                    <div
                      className="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"
                    >
                      <img src={avatar[props.model]}  width={18} height={18} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn"
            >
              <div className="flex-col gap-1 md:gap-3">
                <div className="flex max-w-full flex-col flex-grow">
                  <div
                    data-message-author-role="assistant"
                    data-message-id="cc0a1cff-3321-46c6-bf23-8ef31304b3c6"
                    dir="auto"
                    className="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5"
                    data-message-model-slug="gpt-4o-mini"
                  >
                    <div
                      className="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]"
                    >
                      <div
                        className="markdown prose w-full break-words dark:prose-invert light"
                      >
                        {item.role==='' && <div id="answer">●</div>}
                        {item.role !== '' && <ReactMarkdown>
                          {item.content}
                        </ReactMarkdown>}
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mb-2 flex gap-3 empty:hidden -ml-2">
                  <div
                    className="items-center justify-start rounded-xl p-1 flex"
                  >
                    <div className="flex items-center">
                      <span className="" data-state="closed"
                      ><button
                        className="rounded-lg text-token-text-secondary hover:bg-token-main-surface-secondary"
                        aria-label="复制"
                        data-testid="copy-turn-action-button"
                      >
                          <span
                            className="flex h-[30px] w-[30px] items-center justify-center"
                          >
                            <SvgIcon icon="copy" className="icon-md-heavy" />
                          </span></button>
                      </span><span className="hidden"></span>
                    </div>
                  </div>
                </div>
                <div className="pr-2 lg:pr-0"></div>
                <div className="mt-3 w-full empty:hidden">
                  <div className="text-center"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>
      }
    })}
  
   
  </Fragment>
}

export default forwardRef(ChartContent);